<template>
    <div style="min-width:829px">
    <div v-if="$route.path == '/integral'">
        <div class="vs-search-box">
            <el-form ref="form" :inline="true" :model="paging" label-width="110px">
                <el-form-item label="门店：">
                    <el-select v-model="paging.store_id" clearable style="width:200px" placeholder="请选择">
                        <el-option
                            v-for="item in shopList"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
               <el-form-item label="分享商品:">
                    <el-input style="width:200px" v-model="paging.goods_title"></el-input>
                </el-form-item>
                <el-form-item label="分享ID：">
                    <el-input style="width:200px" v-model="paging.id"></el-input>
                </el-form-item>
                <el-form-item label="" class="vs-right-btns">
                    <el-button @click="reset">重置</el-button>
                    <el-button @click="select(1)" type="primary">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="vs-table-box">
            <div class="operation-box clear-float">
                <el-button icon="el-icon-plus" @click="add()" style="margin-left:auto;" type="primary">新增</el-button>
            </div>
            <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table" style="width: 100%">
                <el-table-column width="200px" label="分享ID" prop="id"></el-table-column>
                <el-table-column  label="分享商品"> 
                    <template slot-scope="scope">
                           <span>{{scope.row.goods.title}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="share_integral" label="分享人积分" ></el-table-column>
                <el-table-column prop="be_share_integral" label="被分享人积分" > </el-table-column>
                <el-table-column fixed="right" width="109" label="操作"> 
                    <template slot-scope="scope">
                        <span @click="setRow(1,scope.row)" class="tab-table-text">编辑</span>
                        <span @click="setRow(2,scope.row,scope.$index)" class="tab-red-text">删除</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="vs-paging-box">
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="paging.page"
                    :page-size="paging.limit"
                    layout="prev, pager, next, jumper"
                    :total="paging.total">
                </el-pagination>
            </div>
        </div>
    </div>
     <router-view></router-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
             options: [
                {
                    value: '正大店',
                    label: '正大店'
                }
            ],
            recordList:[],
            loading:false,
            paging:{
                id:'',
                type:1,
                page:1,
                limit:15,
                total:0,
                goods_title:'',
                store_id: ''
            },
            tableData: [],
            shopList: []
        };
    },
    created() {
       this.GetList()
       this.homegetStore()
    },
    methods: {
        async homegetStore(){
            let {code,data} = await this.$Http.homegetStore();
            if(code){
                this.shopList = data;
            }
        },
         handleCurrentChange(val){
            this.paging.page = val;
            this.GetList();
        },
        async  select(){
        //    if(!this.paging.id && !this.paging.goods_title){
        //         this.$message.success('搜索条件不能少于1个！')
        //         return false
        //    }
           this.GetList()
        },
        add(){
            this.utils.goUrl(`/editIntegral?title=新增分享比列`)
        },
        async setRow(type,row,index){
            if(type == 1){
               this.utils.goUrl(`/editIntegral?title=编辑分享比列&id=${row.id}`)
            }else{
                this.$confirm('此操作将永久删除该分享积分, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(async () => {
                        let { code } = await this.$Http.delShareIntegral({id:row.id});
                        if (code) {
                            this.tableData.splice(index,1)
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }
                    }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            }
        },
        async GetList() {
            this.loading = true;
            let { code, data } = await this.$Http.getShareIntegral(this.paging);
            this.loading = false;
            if (code) {
                this.tableData = data.data;
                 this.paging.total = data.total;
                 this.paging.limit =data.per_page
            }
        },
        reset(){//重置
             this.paging = this.$options.data().paging;
             this.GetList()
        },
    },
};
</script>

<style lang="scss" scoped>

.image-thumbnail{
    width: 130px;
    height: 130px;
}
</style>